<template>
    <div class="fillcontain">
        <div class="table_container">

            <div class="stadium_list" v-show="stadium_selected == false">
                <el-row :gutter="20">
                    <el-col :span="8" v-for="item in tableData">
                        <router-link :to="{ path: 'clockList', query: { stadium: item.id, stadium_name: item.name }}">
                            <div class="grid-content bg-purple">
                                <div style="padding:20px;line-height:40px;font-size:20px;text-align:center;">{{item.name}}</div>
                                <div style="padding:20px;line-height:40px;font-size:14px;">{{item.address}}</div>
                            </div>
                        </router-link>
                    </el-col>

                </el-row>
            </div>

            <div class="stadium_list" v-show="stadium_selected">
                <el-row>
                    <el-col :span="2">
                        <div  style="padding:10px 0px;">
                            <router-link :to="{ path: 'clockList'}"><el-button type="primary"> 返回</el-button></router-link>
                        </div>
                    </el-col>
                    <el-col :span="6">
                        <div class="grid-content "
                             style="height:20px;line-height:40px;padding:5px 20px;color:#8fb9b7">{{stadium_name}}
                        </div>
                    </el-col>
                </el-row>
                <el-button type="primary" @click="addClock">添加时钟</el-button>
                <el-row :gutter="20">
                    <el-col :span="8" v-for="item in clockTableData">
                        <div class="grid-content bg-purple" :id="item.id">
                            <div style="padding:15px 10px;line-height:30px;font-size:16px;text-align:center;">
                                <span v-if="item.type === 1">数显钟</span>
                                <span v-if="item.type === 2">指针钟</span>
                                <span v-if="item.type === 3">倒计时钟[{{item.no}}]</span>
                                [{{item.code}}]
                            </div>
                            <div  style="padding:10px 20px;line-height:30px; text-align:center;">
                                <div class="rssi" v-if="item.countdownFlag == false">
                                    {{item.showClockData.hour}}:{{item.showClockData.minute}}:{{item.showClockData.second}}
                                </div>
                                <div class="rssi" style="font-size: 18px; line-height: 20px; clear: both; padding: 0 10px 0 20px;" v-if="item.countdownFlag == true">
                                    <div style="float:left;">{{item.countdownData.hour}}:</div>
                                    <div style="float:left;">{{item.countdownData.minute}}:</div>
                                    <div style="float:left;">{{item.countdownData.second}}</div>
                                </div>
                            </div>
                            <div v-if="item.showClockData.countdownStatus == 1"
                                 style="padding:10px 5px;line-height:30px; text-align:center;">
                                <div class="rssi" >倒计时开始</div>
                            </div>
                            <div style="padding:10px 10px;line-height:30px;font-size:14px;">
                                <div v-if="item.showClockData.onlineState == 1" style="float:left;padding:0 5px;">在线
                                </div>
                                <div v-if="item.showClockData.onlineState == 0" style="float:left;padding:0 5px;">离线
                                </div>
                                <div style="float:left;padding:0 5px;"
                                     @click="editClock(item.id  , item.code , item.type , true)">编辑
                                </div>
                                <div style="float:left;padding:0 5px;" @click="delClock(item.id)">删除</div>
                                <div style="float:left;padding:0 5px;" v-if="item.type === 2">{{item.showClockData.state}}</div>
                                <div style="float:left;padding:0 5px;" @click="startCountdownTime(item.no,item.id)"
                                     v-if="item.type === 3">开始倒计时
                                </div>
                            </div>
                        </div>
                    </el-col>
                </el-row>
            </div>
        </div>
        <el-dialog :title="dialogTitle" :visible.sync="dialogFormVisible" :modal-append-to-body="false">
            <div class="form">
                <el-form :inline="true" :model='clockData' ref="clockData" class="demo-form-inline">
                    <div class="form-content">
                        <el-row>
                            <el-form-item label="时钟编号:" prop="name">
                                <el-input type="text" class="area" clearable :rows="1" autosize placeholder="请输入时钟编号"
                                          v-model="clockData.code">
                                </el-input>
                            </el-form-item>
                        </el-row>
                        <el-row>
                            <el-form-item label="时钟类型:" prop="address">
                                <el-select style="width: 330px;" v-model="clockData.type" placeholder="请选择时钟类型">
                                    <el-option
                                            v-for="item in clockTypeOption"
                                            :key="item.code"
                                            :label="item.name"
                                            :value="item.code">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </el-row>
                    </div>
                </el-form>
                <span slot="footer" class="dialog-footer">
                    <el-button @click="dialogFormVisible = false;reset_table()">取 消</el-button>
                    <el-button type="primary" @click="doAddClock()">确 定</el-button>
            </span>
            </div>
        </el-dialog>
        <!-- 倒计时界面开始 -->
        <el-dialog
                :title="dialogTitle"
                :visible.sync="dialogCountdownFormVisible"
                :modal-append-to-body="false">
            <div class="form">
                <div class="form-content" style="font-size:16px;line-height:20px;">设置倒计时时间</div>

                <div class="form-content" style="font-size:16px;padding:20px;">
                    <el-row>
                        <el-button type="primary" plain v-on:click="changeType(1)">按时间段</el-button>
                        <el-button type="primary" plain v-on:click="changeType(2)">按时间点</el-button>
                    </el-row>
                    <el-row>
                        <span v-if="defaultType===1">设置从现在开始的倒计时的时长（5分钟：00:05:00）</span>
                        <span v-if="defaultType===2">设置从现在开始倒计时的结束时间点（下午6点：18:00:00）</span>
                    </el-row>
                </div>
                <div class="form-content" style="font-size:16px;padding:20px;">
                    <el-row>
                        <div style="width:80%;border:1px solid #000000;height:40px;padding:10px;font-size:30px;">
                            <div style="float:left;padding-left:10%;font-size:16px;">
                                <el-input-number v-model="num_hour" style="width:120px;font-size:16px;"
                                                 controls-position="right" @change="handleChange" :min="0"
                                                 :max="23"></el-input-number>
                            </div>
                            <div style="float:left;width:60px;text-align: center;">:</div>
                            <div style="float:left;font-size:16px;">
                                <el-input-number v-model="num_minute" style="width:120px;font-size:16px;"
                                                 controls-position="right" @change="handleChange" :min="0"
                                                 :max="60"></el-input-number>
                            </div>
                            <div style="float:left;width:60px;text-align: center;">:</div>
                            <div style="float:left;font-size:16px;">
                                <el-input-number v-model="num_second" style="width:120px;font-size:16px;"
                                                 controls-position="right" @change="handleChange" :min="0"
                                                 :max="60"></el-input-number>
                            </div>
                        </div>
                    </el-row>

                </div>
                <div class="form-content" style="padding-left:30%;padding-top:50px;padding-bottom:50px;">
                <span slot="footer" class="dialog-footer">
                    <el-button @click="dialogCountdownFormVisible = false">取 消</el-button>
                    <el-button type="primary" @click="doCountdownClock()">开始计时</el-button>
                </span>
                </div>
            </div>
        </el-dialog>
        <!-- 倒计时界面结束 -->
    </div>
</template>

<script>
    import dtime from 'time-formater'
    import * as mUtils from '@/utils/mUtils'
    import {axios} from 'utils/'

    export default {
        data() {
            return {
                sortnum: 0,
                active: 0,
                currentCountdownTimerArr:[{
                    id: 'a1'
                },{
                    id: 'a2'
                },{
                    id: 'a3'
                },{
                    id: 'a4'
                }],
                timer_1 :'',
                timer_2 :'',
                timer_3 :'',
                timer_4 :'',
                timer_5 :'',
                timer_6 :'',
                timer_7 :'',
                timer_8 :'',
                is_edit: false,
                endTime: '',
                num_hour: 0,
                currentCountdownclockLongId:'',
                currentCountdownclockId: '',
                ids:'',
                defaultType: 1,
                num_minute: 0,
                num_second: 0,
                new_time:'',
                old_time:'',
                cut_down_time_second_all:'',
                cut_down_time_second:'',
                cut_down_time_minute:'',
                cut_down_time_hour:'',
                dialogTitle: '',
                plain: '',
                tableData: [],
                dialogCountdownFormVisible: false,
                clockTableData: [],
                durationSeconds: '',
                clockData: {
                    stadiumId: '',
                    code: '',
                    type: ''
                },
                showClockData: {
                    countdownStatus: '',
                    rssi: '',
                    hour: '',
                    state: '',
                    minute: '',
                    second: '',
                    onlineState: '',

                },
                clockTypeOption: [{
                    code: "1",
                    name: "数显钟"
                }, {
                    code: "2",
                    name: "倒计时钟"
                },{
                    code: "3",
                    name: "指针钟"
                }],
                clockWorkStatesOption:[{
                    "name": "正常",
                    "code": 0
                },{
                    "name": "正追",
                    "code": 1
                },{
                    "name": "停止",
                    "code": 2
                },{
                    "name": "倒追",
                    "code": 3
                },{
                    "name": "分针检测故障",
                    "code": 32
                }],
                stadium_id: '',
                stadium_name: '',
                tokenAccess: '',
                dialogFormVisible: false,
                clockTableTypeData: [],
                clock_item: {
                    stadiumId: '',
                    code: '',
                    type: '',
                    showClockData: ''
                },
                stadium_selected: false,
                //需要给分页组件传的信息
                paginations: {
                    page_index: 1,  // 当前位于哪页
                    total: 0,        // 总数
                    page_size: 20,   // 1页显示多少条
                    page_sizes: [5, 10, 15, 20],  //每页显示多少条
                    layout: "total, sizes, prev, pager, next, jumper"   // 翻页属性
                },
            }
        },
        watch: {
            '$route': 'routeChanged'
            // 方法名

        },
        created() {
            this.tokenAccess = mUtils.getStore('tokenAccess');
            this.stadium_id = this.$route.query.stadium;
            this.stadium_name = this.$route.query.stadium_name;
            if (this.stadium_name != '' && this.stadium_name != undefined && this.stadium_name != 'undefined') {
                this.stadium_selected = true;
                this.getClockList(this.stadium_id);
            } else {
                this.stadium_selected = false;
            }
            this.getClockType();
        },
        mounted() {
            this.getList({
                fun: () => {
                }
            });
        },
        destroyed() {
            clearInterval(this.timerID);
            clearInterval(this.timer_1);
            clearInterval(this.timer_2);
        },
        methods: {
            addClock() {
                this.is_edit = false;
                this.dialogFormVisible = true;
                this.dialogTitle = '添加时钟';
                this.clockData.stadiumId = this.stadium_id;
            },
            handleChange(value) {
                //console.log(value);
            },
            changeType(t) {
                this.defaultType = t;
                //console.log(t);
            },
            delClock(id) {
                this.$confirm('确定删除？').then(_ => {
                    if (id != '') {
                        axios({
                            type: 'DELETE',
                            path: 'http://59.110.70.252:8031/clocks?id=' + id,
                            data: '',
                            fn: data => {
                                //成功之后的回调函数
                                this.getClockList(this.stadium_id);
                            },
                            headers: {
                                'x-access-token': this.tokenAccess,
                                'Content-Type': 'application/x-www-form-urlencoded'
                            }
                        })
                    }
                })
            },
            startCountdownTime(id,clockId) {

                this.dialogCountdownFormVisible = true;
                this.currentCountdownclockId = id;
                this.currentCountdownclockLongId = clockId;
                console.log('currentClockId:'+this.currentCountdownclockId);
            },
            //设置倒计时时钟
            doCountdownClock() {
                let id = this.currentCountdownclockId;
                let d_time = this.num_second + this.num_minute * 60 + this.num_hour * 60 * 60;
                if (parseInt(this.num_hour) < 10) {
                    this.num_hour = '0' + this.num_hour;
                }
                if (parseInt(this.num_minute) < 10) {
                    this.num_minute = '0' + this.num_minute;
                }
                if (parseInt(this.num_second) < 10) {
                    this.num_second = '0' + this.num_second;
                }
                if (this.defaultType === 2) {
                    //按时间点类型的参数传递
                    this.durationSeconds = '';
                    this.endTime = '&endTime=' + this.num_hour + ':' + this.num_minute + ':' + this.num_second;
                    //先判断时间是否是大于现在钟表的时间
                    this.old_time = parseInt(this.clockTableData[id].showClockData.hour) * 3600 + parseInt(this.clockTableData[id].showClockData.minute) * 60  + parseInt(this.clockTableData[id].showClockData.second) ;
                    this.new_time = parseInt(this.num_hour) * 3600 + parseInt(this.num_minute) * 60  + parseInt(this.num_second) ;
                    if(this.new_time <= this.old_time){
                        this.$message({
                            showClose: true,
                            message: '设置倒计时失败,倒计时时间必须大于当前时间。',
                            type: 'error'
                        });
                        return false;
                    }else {
                        this.cut_down_time_second_all = this.new_time - this.old_time;
                        //总时间换算成秒，再换算成倒计时分秒
                        this.cut_down_time_hour = Math.floor(this.cut_down_time_second_all / 3600);
                        this.cut_down_time_minute = Math.floor((this.cut_down_time_second_all - this.cut_down_time_hour * 3600) / 60);
                        this.cut_down_time_second = this.cut_down_time_second_all - this.cut_down_time_hour * 3600 - this.cut_down_time_minute * 60;
                        //提示用户倒计时时间
                        this.$confirm('为确保时钟正常运行，请先确定倒计时时间是' + this.cut_down_time_hour + '时' + this.cut_down_time_minute + '分' + this.cut_down_time_second + '秒？')
                            .then(_ => {
                                axios({
                                    type: 'post',
                                    path: 'http://59.110.70.252:8031/clocks/countdown?id=' + this.currentCountdownclockLongId + this.durationSeconds + this.endTime,
                                    data: '',
                                    fn: data => {
                                        //成功之后的回调函数
                                        if (data.success == true) {
                                            this.$message({
                                                showClose: true,
                                                message: '设置倒计时成功',
                                                type: 'success'
                                            });
                                            // 开始倒计时
                                            this.startCountdownClock(id);
                                            this.dialogCountdownFormVisible = false;
                                            this.num_minute = 0;
                                            this.num_second = 0;
                                            this.num_hour = 0;
                                        }else{
                                            this.$message({
                                                showClose: true,
                                                message: '设置倒计时失败',
                                                type: 'error'
                                            });
                                        }
                                    },
                                    headers: {
                                        'x-access-token': this.tokenAccess,
                                        'Content-Type': 'application/x-www-form-urlencoded'
                                    }
                                })
                            })
                    }
                } else {
                    //按时间段类型的参数传递
                    this.endTime = '';
                    this.durationSeconds = '&durationSeconds=' + d_time;
                    if(d_time > 0){
                        axios({
                            type: 'post',
                            path: 'http://59.110.70.252:8031/clocks/countdown?id=' + this.currentCountdownclockLongId + this.durationSeconds + this.endTime,
                            data: '',
                            fn: data => {
                                //成功之后的回调函数
                                if (data.success == true) {
                                    this.$message({
                                        showClose: true,
                                        message: '设置倒计时成功~',
                                        type: 'success'
                                    });
                                    // 开始倒计时
                                    //console.log('时钟列表信息',this.clockTableData);
                                    this.startCountdownClock(id);
                                    this.dialogCountdownFormVisible = false;
                                    this.num_minute = 0;
                                    this.num_second = 0;
                                    this.num_hour = 0;

                                }else{
                                    this.$message({
                                        showClose: true,
                                        message: '设置倒计时失败',
                                        type: 'error'
                                    });
                                }
                            },
                            headers: {
                                'x-access-token': this.tokenAccess,
                                'Content-Type': 'application/x-www-form-urlencoded'
                            }
                        })
                    }else{
                        this.$message({
                            showClose: true,
                            message: '请设置倒计时时间',
                            type: 'error'
                        });
                    }

                }

            },
            editClock(id, code, type) {
                this.is_edit = true;
                this.dialogFormVisible = true;
                this.dialogTitle = '编辑时钟';
                this.clockData.stadiumId = this.stadium_id;
                this.clockData.code = code;
                this.clockData.type = type;
                this.clockData.id = id;
                this.active = 3;
            },
            reset_table() {
                this.clockData.code = '';
                this.clockData.type = '';
            },
            updateClock() {
                clearInterval(this.timerID);
                this.timerID = setInterval(this.updateTime, 1000);
            },
            startCountdownClock(id){
                if(this.defaultType ==1) {
                    this.clockTableData[id].countdownData.second = this.num_second;
                    this.clockTableData[id].countdownData.minute = this.num_minute;
                    this.clockTableData[id].countdownData.hour = this.num_hour;
                    this.clockTableData[id].countdownFlag = true;
                }else if(this.defaultType ==2){
                    //按时间点倒计时类型
                    this.clockTableData[id].countdownFlag = true;
                    if(true){
                        this.old_time = parseInt(this.clockTableData[id].showClockData.hour) * 3600 + parseInt(this.clockTableData[id].showClockData.minute) * 60  + parseInt(this.clockTableData[id].showClockData.second) ;
                        this.new_time = parseInt(this.num_hour) * 3600 + parseInt(this.num_minute) * 60  + parseInt(this.num_second) ;
                        //console.log('newtime'+this.new_time);
                        //console.log('oldtime'+this.old_time);
                        if(this.new_time > this.old_time){
                            this.cut_down_time_second_all = this.new_time - this.old_time ;
                            //总时间换算成秒，再换算成倒计时分秒
                            this.cut_down_time_hour = Math.floor(this.cut_down_time_second_all/3600) ;
                            this.cut_down_time_minute = Math.floor( (this.cut_down_time_second_all - this.cut_down_time_hour * 3600) /60 );
                            this.cut_down_time_second =  this.cut_down_time_second_all - this.cut_down_time_hour * 3600  - this.cut_down_time_minute * 60  ;
                            this.clockTableData[id].countdownData.second = this.cut_down_time_second;
                            this.clockTableData[id].countdownData.minute = this.cut_down_time_minute;
                            this.clockTableData[id].countdownData.hour   = this.cut_down_time_hour;
                        }else{
                            this.$message({
                                showClose: true,
                                message: '时间格式不正确，设置倒计时失败。',
                                type: 'error'
                            });
                            return false;
                        }
                    }
                }

                if(id == 0){
                    clearInterval(this.timer_1);
                    this.timer_1 = setInterval(this.updateCountdownTime, 1000);
                    console.log('倒计时中1'+this.timer_1);
                }else if(id == 1){
                    clearInterval(this.timer_2);
                    this.timer_2 = setInterval(this.updateCountdownTime, 1000);
                    console.log('倒计时中1'+this.timer_2);
                }else{
                    clearInterval(this.timer_3);
                    this.timer_3 = setInterval(this.updateCountdownTime, 1000);
                    console.log('倒计时中1'+this.timer_3);
                }
               // this.currentCountdownTimerArr[this.currentCountdownclockId].id = setInterval(this.updateCountdownTime, 1000);
            },
            updateCountdownTime(){
                //如果倒计时的秒是>0,
                if( ( this.clockTableData[this.currentCountdownclockId].countdownData.second == '00' || this.clockTableData[this.currentCountdownclockId].countdownData.second == '0') &&
                    ( this.clockTableData[this.currentCountdownclockId].countdownData.minute  != '0'  && this.clockTableData[this.currentCountdownclockId].countdownData.minute != '00')){
                    //整分00:01:00的情况
                    this.clockTableData[this.currentCountdownclockId].countdownData.second =  60;
                    this.clockTableData[this.currentCountdownclockId].countdownData.minute =  this.clockTableData[this.currentCountdownclockId].countdownData.minute -1;
                    this.clockTableData[this.currentCountdownclockId].countdownData.second =  this.clockTableData[this.currentCountdownclockId].countdownData.second -1;
                    console.log('10:01:00');
                }else if( this.clockTableData[this.currentCountdownclockId].countdownData.second  == '0' &&
                    (this.clockTableData[this.currentCountdownclockId].countdownData.minute) == '0' &&
                    (this.clockTableData[this.currentCountdownclockId].countdownData.hour) != '0' &&
                    (this.clockTableData[this.currentCountdownclockId].countdownData.hour) != '00'){
                    console.log('01:00:00');
                    //整小时01:00:00的情况
                    this.clockTableData[this.currentCountdownclockId].countdownData.second =  60;
                    this.clockTableData[this.currentCountdownclockId].countdownData.minute =  59;
                    this.clockTableData[this.currentCountdownclockId].countdownData.hour =  this.clockTableData[this.currentCountdownclockId].countdownData.hour - 1;
                    this.clockTableData[this.currentCountdownclockId].countdownData.second =  this.clockTableData[this.currentCountdownclockId].countdownData.second -1;
                }else if(
                    (this.clockTableData[this.currentCountdownclockId].countdownData.second == '0' ||
                        this.clockTableData[this.currentCountdownclockId].countdownData.second == '00' )&&
                    (this.clockTableData[this.currentCountdownclockId].countdownData.minute == '0' ||
                        this.clockTableData[this.currentCountdownclockId].countdownData.minute == '00')&&
                    (this.clockTableData[this.currentCountdownclockId].countdownData.hour == '0' ||
                        this.clockTableData[this.currentCountdownclockId].countdownData.hour == '00') ){
                    //倒计时结束
                    this.clockTableData[this.currentCountdownclockId].countdownFlag = false ;
                    //clearInterval(this.currentCountdownTimerArr[this.currentCountdownclockId].id);
                    //console.log(1111,this.currentCountdownclockId)
                    if(this.currentCountdownclockId ==0){

                        clearInterval(this.timer_1);
                        console.log('倒计时结束0'+this.timer_1);
                    }else{
                        clearInterval(this.timer_2);
                        console.log('倒计时结束1'+this.timer_2);
                    }
                    console.log('00:00:00');
                }else{
                    this.clockTableData[this.currentCountdownclockId].countdownData.second =  this.clockTableData[this.currentCountdownclockId].countdownData.second -1;
                    if(this.clockTableData[this.currentCountdownclockId].countdownData.second == '-1'){
                        console.log('clock is -1');
                        if(this.currentCountdownclockId == 0){
                            clearInterval(this.timer_1);console.log('id :'+this.currentCountdownclockId);
                        }else{
                            clearInterval(this.timer_2);
                        }
                        //clearInterval(this.currentCountdownTimerArr[this.currentCountdownclockId].id);
                        this.clockTableData[this.currentCountdownclockId].countdownFlag = false ;
                    }else{
                        //console.log('clock last :'+this.clockTableData[this.currentCountdownclockId].countdownData.second);
                    }
                    //console.log('00:00:10');
                }



                //console.log('dingshi clock is '+this.num_hour+':'+this.num_minute+ ':' +this.num_second);
                //console.log('clock id :'+this.currentCountdownclockId);

            },
            updateTime() {
                var cd = new Date();
                let ary = this.deep(this.clockTableData);
                for (var i in ary) {
                    ary[i].showClockData.second = parseInt(ary[i].showClockData.second) + 1
                    if (ary[i].showClockData.second > 59) {
                        ary[i].showClockData.second = '00'
                        ary[i].showClockData.minute = parseInt(ary[i].showClockData.minute) + 1
                        ary[i].showClockData.minute = this.zeroPadding(ary[i].showClockData.minute)
                        if (ary[i].showClockData.minute > 59) {
                            ary[i].showClockData.minute = '00'
                            ary[i].showClockData.hour = parseInt(ary[i].showClockData.hour) + 1
                        }
                        //console.log(ary[i].showClockData.second)
                    } else {
                        ary[i].showClockData.second = this.zeroPadding(parseInt(ary[i].showClockData.second))
                    }
                }
                this.clockTableData = ary;

            },
            zeroPadding(num) {
                if (parseInt(num) < 10) {
                    return 0 + String(num)
                } else {
                    return num
                }
            },
            doAddClock() {
                this.clockData.stadiumId = this.stadium_id;
                this.clockData.code = this.clockData.code;
                this.clockData.type = this.clockData.type;
                if (this.clockData.code == '' || this.clockData.type == '' || this.clockData.stadiumId == '') {
                    this.$message.error({
                        showClose: true,
                        message: '不能为空'
                    });
                    return false;
                } else {
                    let url = 'http://59.110.70.252:8031/clocks?stadiumId=' + this.clockData.stadiumId + '&code=' + this.clockData.code + '&type=' + this.clockData.type
                    let op_type = 'post'
                    if (this.is_edit == true) {
                        url = 'http://59.110.70.252:8031/clocks?id=' + this.clockData.id + '&stadiumId=' + this.clockData.stadiumId + '&code=' + this.clockData.code + '&type=' + this.clockData.type
                        op_type = 'put'
                        if (this.clockData.id == '') {
                            this.$message.error({
                                showClose: true,
                                message: '参数错误'
                            });
                            return false
                        }
                    }
                    axios({
                        type: op_type,
                        path: url,
                        data: '',
                        fn: data => {
                            //成功之后的回调函数
                            //this.paginations.total = data.count;
                            if (data.success == true) {
                                this.$message({
                                    showClose: true,
                                    message: '添加成功',
                                    type: 'success'
                                });
                                this.getClockList(this.stadium_id);
                                this.dialogFormVisible = false;
                            }
                        },
                        headers: {
                            'x-access-token': this.tokenAccess,
                            'Content-Type': 'application/x-www-form-urlencoded'
                        }
                    })
                }
            },
            next() {
                if (this.active++ > 2) this.active = 0;
            },
            routeChanged() {
                if (this.$route.query.stadium) {
                    //console.log(this.$route.query.stadium);
                }
                this.stadium_id = this.$route.query.stadium;
                this.stadium_name = this.$route.query.stadium_name;
                if (this.stadium_name != '' && this.stadium_name != undefined && this.stadium_name != 'undefined') {
                    this.stadium_selected = true;
                    this.getClockList(this.stadium_id);
                } else {
                    this.stadium_selected = false;
                    this.getList({
                        fun: () => {
                        }
                    });
                }
            },
            deep(obj) {

                if (typeof obj !== 'object') return obj;
                if (obj == null) return null;

                if (obj instanceof RegExp) return new RegExp(obj);
                if (obj instanceof Date) return new Date(obj);
                let instance = new obj.constructor();

                for (let key in obj) {
                    instance[key] = typeof obj[key] === 'object' ? this.deep(obj[key]) : obj[key]
                }
                return instance;


            },
            getClockList(stadium_id) {
                this.clockTableData = [];
                this.active = 2;
                axios({
                    type: 'get',
                    path: 'http://59.110.70.252:8031/clocks?stadiumId=' + stadium_id + '&pageNo=1&pageSize=20',
                    data: '',
                    fn: data => {
                        //成功之后的回调函数
                        this.paginations.total = data.count;
                        this.tableData = [];
                        let a = 0;
                        this.le = data.data.length;
                        data.data.forEach((item, index) => {
                            this.clockWorkStatesOption.forEach((item, index) => {
                                if(data.state == item.code){
                                    data.state = item.name ;
                                }
                            })

                            let i_clock_no = 0;
                            //console.log('clock is :',index);
                            this.showClockData.rssi = 0;
                            this.showClockData.hour = 0;
                            this.showClockData.state = 0;
                            this.showClockData.minute = 0;
                            this.showClockData.second = 0;
                            this.showClockData.countdownStatus = 0;
                            this.showClockData.onlineState = 0;
                            let tableItem = {
                                id: item.id,
                                no: a,
                                code: item.code,
                                type: item.type,
                                stadiumId: stadium_id,
                                showClockData: this.showClockData,
                                countdownFlag: false, //倒计时表示
                                countdownData: { hour: '00', minute:'00', second:'00' }
                            };

                            //this.getClockInfo(item.id, (data) => {
                            //    //替换数字对应的时钟状态
                             //    tableItem = {
                             //       showClockData: data
                             //   };
                                //this.callBack(a);
                                //this.updateClock()
                           // })
                            this.clockTableData.push(tableItem);
                            //console.log(this.clockTableData);
                            a += 1;
                            i_clock_no = i_clock_no+1 ;
                            if( a+1 == this.le){
                                //console.log('所有的表信息是:'+this.clockTableData);
                                this.clockTableData.forEach((item, index) => {
                                    this.ids += item.id + ',';
                                    //console.log(item.id);
                                    //this.clockTableData[index].showClockData = this.getClockInfo(item.id);

                                })
                                //console.log(this.ids + '---');
                                this.getClockInfo(this.ids);
                            }
                        })


                    },
                    headers: {
                        'x-access-token': this.tokenAccess,
                        'Content-Type': 'application/x-www-form-urlencoded'
                    }
                })

            },
            callBack(a) {
                if (a >= this.le) {
                    this.updateClock()
                }
            },
            getClockInfo(clock_id) {
                console.log(clock_id);
                if (clock_id) {
                    axios({
                        type: 'get',
                        path: 'http://59.110.70.252:8031/clocks/infos?ids=' + clock_id,
                        data: '',
                        fn: data => {
                            //成功之后的回调函数
                            // cb(data.data)
                            //console.log('is_success'+data.success);
                            //cb(data.data)
                            if (data.success === true) {
                                for(let key in data.data){
                                //data.data.forEach((item, index) => {
                                    const ids_arr = this.ids.split(",");
                                    for(let key2 in ids_arr){
                                        console.log(ids_arr[key2]);
                                        console.log(key);
                                        if(key2 == key){
                                            console.log(this.ids[key]);
                                        }

                                    }
                                    /*this.showClockData.rssi = item.rssi;
                                    this.showClockData.hour = data.data.hour ;
                                    this.showClockData.state = data.data.state;
                                    this.showClockData.minute = data.data.minute;
                                    this.showClockData.second = data.data.second + 1;
                                    this.showClockData.onlineState = data.data.onlineState;*/
                                }


                            } else {
                                this.showClockData.rssi = 0;
                                this.showClockData.hour = 0;
                                this.showClockData.state = 0;
                                this.showClockData.minute = 0;
                                this.showClockData.second = 0;
                                this.showClockData.countdownStatus = 0;
                                this.showClockData.onlineState = 0;
                                console.log('时钟表没数据22');
                                //console.log(this.showClockData);
                            }
                        },
                        error:data=>{
                            console.log('时钟表没数据33');
                         },
                        headers: {
                            'x-access-token': this.tokenAccess,
                            'Content-Type': 'application/x-www-form-urlencoded'
                        }
                    }).catch(function(err){
                        console.log(err);
                    })
                }
            },
            getClockType() {
                this.clockTypeOption = [];
                axios({
                    type: 'get',
                    path: 'http://59.110.70.252:8031/config/constants',
                    data: '',
                    fn: data => {
                        //成功之后的回调函数
                        this.paginations.total = data.count;
                        this.tableData = [];
                        data.data.clockTypes.forEach((item, index) => {
                            const tableItemType = {
                                code: item.code,
                                name: item.name
                            }
                            this.clockTypeOption.push(tableItemType);
                        })
                        data.data.workStates.forEach((item, index) => {
                            const tableItemType2 = {
                                code: item.code,
                                name: item.name
                            }
                            this.clockWorkStatesOption.push(tableItemType2);
                        })
                        fun && fun();
                    },
                    headers: {
                        'x-access-token': this.tokenAccess,
                        'Content-Type': 'application/x-www-form-urlencoded'
                    }
                })
            },
            getList({
                        page,
                        page_size,
                        where,
                        fun
                    } = {}) {
                var query = this.$route.query;
                this.active = 1;
                this.paginations.page_index = page || parseInt(query.page) || 1;
                this.paginations.page_size = page_size || parseInt(query.page_size) || this.paginations.page_size;
                var data = {
                    pageIndex: this.paginations.page_index,
                    pageSize: this.paginations.page_size
                };
                if (where) {
                    data = Object.assign(data, where || {});
                }
                // 封装  get,path,params,fn,errfn
                axios({
                    type: 'get',
                    path: 'http://59.110.70.252:8031/stadiums?pageNo=1&pageSize=20',
                    data: '',
                    fn: data => {
                        //成功之后的回调函数
                        this.paginations.total = data.count;
                        this.tableData = [];
                        data.data.forEach((item, index) => {
                            const tableItem = {
                                id: item.id,
                                name: item.name,
                                address: item.address
                            }
                            this.tableData.push(tableItem);
                        })
                        fun && fun();
                    },
                    headers: {
                        'x-access-token': this.tokenAccess,
                        'Content-Type': 'application/x-www-form-urlencoded'
                    }
                })
            },

            /**
             * 改变页码和当前页时需要拼装的路径方法
             * @param {string} field 参数字段名
             * @param {string} value 参数字段值
             */
            setPath(field, value) {
                var path = this.$route.path,
                    query = Object.assign({}, this.$route.query);
                if (typeof field === 'object') {
                    query = field;
                } else {
                    query[field] = value;
                }
                this.$router.push({
                    path,
                    query
                });
            },
            // 每页多少条切换
            handleSizeChange(page_size) {
                //console.log(`每页 ${page_size} 条`);
                this.getList({
                    page_size,
                    fun: () => {
                        this.setPath('page_size', page_size);
                    }
                });
            },
            // 上下分页
            handleCurrentChange(page) {
                this.sortnum = this.paginations.page_size * (page - 1);
                this.getList({
                    page,
                    fun: () => {
                        this.setPath('page', page);
                    }
                });
            },

        },
    }
</script>

<style lang="less">
    .select_stadium {
        width: 60%;
        padding: 20px;
    }

    .stadium_list {
        width: 60%;
        padding: 20px;
    }

    .el-row {
        margin-bottom: 20px;
        &:last-child {
            margin-bottom: 0;
        }
    }

    .el-col {
        border-radius: 4px;
    }

    .bg-purple-dark {
        background: #99a9bf;
    }

    .bg-purple {
        background: #d3dce6;
    }

    .bg-purple-light {
        background: #e5e9f2;
    }

    .grid-content {
        border-radius: 20px;
        min-height: 36px;
        width: 240px;
        height: 240px;
        margin: 10px 0px;
    }

    .row-bg {
        padding: 10px 0;
        background-color: #f9fafc;
    }
</style>

